<template>
  <div style="width:calc(100% - 220px);padding:10px">
    <div style="margin:10px 0;">
        <el-button type="success" plain @click="batchQuery(1)">批量通过</el-button>
        <el-button type="danger" plain @click="batchQuery(2)">批量不通过</el-button>
    </div>
    <el-table
      :data="dataList"
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="id"
        label="编号"
        fixed
        width="100">
      </el-table-column>
      <el-table-column
        prop="activeName"
        label="活动名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="acriveAddress"
        width="200"
        label="活动地址">
      </el-table-column>
      <el-table-column
        prop="createTime"
        width="180"
        label="报名时间">
      </el-table-column>
      <el-table-column
        align="center"
        prop="score"
        width="100"
        label="活动分数">
      </el-table-column>
      <el-table-column
        width="130"
        label="活动等级">
        <template slot-scope="scope">
            <el-tag :type="scope.row.type===1?'success':'primary'">{{ getType(scope.row.type) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300" fixed="right">
        <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-tickets" @click="detail(scope.row.id)">详情</el-button>
            <el-button type="success" icon="el-icon-sunny" @click="query(scope.row.id,1)">通过</el-button>
            <el-button type="danger" icon="el-icon-cloudy" @click="query(scope.row.id,2)">不通过</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        small
        layout="prev, pager, next"
        :page-count="pageCount"
        :page-size="8"
        :current-page="currentPage"
        :current-change="handlerChange"
        hide-on-single-page
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
import request from '@/util/request'
export default {
    data(){
        return {
            dataList:[],
            currentPage:0,
            total:0,
            selectActve:[],
            pageCount:null
        }
    },
    methods:{
        getrList(){
            request.get(`/admin/active/examine-list?currentPage=${this.currentPage}`).then((res) => {
                console.log('获取成功：',res)
                this.dataList = res.data.records
                this.pageCount = res.data.pages
                this.total = res.data.total
            })
            .catch(err =>{
                if (err.response) {
                    this.$notify.error(err.message)
                } else {
                    this.$notify.error('网络错误')
                }
            })
        },
        handlerChange(page){
            console.log(page);
            this.currentPage = page
            this.getActiveList()
        },
        getType(type){
            if(type===0){
                return '院级'
            }else if(type===1){
                return '校级'
            }else if(type===2){
                return '社团'
            }
        },
        handleSelectionChange(val){
            this.selectActve = val
        },
        // 批量操作
        batchQuery(type){
            var arr = []
            this.selectActve.forEach(item=>{
                arr.push(item.id)
            })

            console.log('批量操作',arr,type);
            if(arr.length<=0){
                this.$message.warning('抱歉，没有选择任何活动')
                return;
            }
            const form = {
                ids:arr,
                type:type
            }
            this.$confirm('确定批量'+type===1?'通过':'不通过'+'吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                request.post('/admin/active/examine',form).then((res) => {
                    console.log('获取成功：',res)
                    this.$notify.success('操作成功')
                    this.getrList()
                    setTimeout(()=>{
                        loading.close()
                    },1000)
                })
                .catch(err =>{
                    if (err.response) {
                        this.$notify.error(err.message)
                    } else {
                        this.$notify.error('网络错误')
                    }
                   }
                )
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
            
        },
        query(id,type){
            var arr = []
            arr.push(id)
            const form = {
                ids:arr,
                type:type
            }
            console.log('单个操作',id,type);
            this.$confirm('确定'+(type===1?'通过':'不通过')+'吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request.post('/admin/active/examine',form).then((res) => {
                    console.log('获取成功：',res)
                    this.$notify.success('操作成功')
                    this.getrList()
                })
                .catch(err =>{
                   
                   }
                )
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
        },
        detail(item){
            this.$router.push(`/detail?id=${item}`)
        }
    },
    mounted(){
        this.getrList()
    }
}
</script>

<style>

</style>